<% if params[:action] == "show" %>
  <div class="dropdown pull-right">
    <button class="btn btn-outline-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:14px;"><%=translation('tag.index.sort_by')%></button>
    <div class="dropdown-menu dropdown-menu-right mt-1" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item <% if params[:order] == 'last_updated' %> active<% end %>" href="/tag/<%= params[:id] %>">
        <% if @node_type == 'wiki' %>
          <i class="fa fa-clock-o"></i> <span class="d-lg-inline">by created date</span>
        <% else %>
          <i class="fa fa-clock-o"></i> <span class="d-lg-inline">by last updated</span>
        <% end %>
      </a>
      <a class="dropdown-item <% if params[:order] == 'views' %> active<% end %>" href="?order=views">
        <i class="fa fa-eye"></i> <span class="d-lg-inline">by views</span>
      </a>
      <a class="dropdown-item <% if params[:order] == 'likes' %> active<% end %>" href="?order=likes">
        <i class="fa fa-star"></i> <span class="d-lg-inline">by likes</span>
      </a>
      <div class="dropdown-divider"></div>
      <h6 class="dropdown-header">View date range</h6>
      <a class="dropdown-item" href="?start=<%= (@start || Time.now - 1.month).to_formatted_s(:long) %>&end=<%= (@end || Time.now).to_formatted_s(:long) %>" >past month</a>
      <a class="dropdown-item" href="?start=<%= (@start || Time.now - 1.year).to_formatted_s(:long) %>&end=<%= (@end || Time.now).to_formatted_s(:long) %>" >past year</a>
      <a class="dropdown-item" data-toggle="modal" data-target="#dateModal" >custom</a>
    </div>
  </div>
<%end%>

<%= form_tag request.url, method: 'get', enforce_utf8: false do %>
  <div class="modal" id="dateModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
  
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Select Custom Range</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
  
        <!-- Modal body -->
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-6">
            <label>From</label><br>
            <input type="date" id="from", class="form-control hasDatepicker" data-date-format="dd-mm-yyyy" type="text" name="start" required>  
            </div>
            <div class="col-sm-6">
              <label>To</label><br>
              <input type="date" id="to", class="form-control hasDatepicker" type="text" name="end" required>
            </div>
          </div>
        </div>
        <div class="alert alert-danger hide" role="alert">
        Please select a valid date.
      </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <%= submit_tag "Save changes", name: nil, class: 'btn btn-primary' %>
          <% end %>
        </div>
  
      </div>
    </div>
  </div>
  <style>
    .invalid{
      background-color: red;
    }

    .success{
      background-color: green;
    }

    .hide{
      display: none;
    }

  </style>

  <script>
    $(function () {
      Date.prototype.ddmmyyyy = function () {
          var day = this.getDate().toString();
          var month = (this.getMonth() + 1).toString();
          var year = this.getFullYear().toString();
          return (day[1] ? day : "0" + day[0]) + "-" + (month[1] ? month : "0" + month[0]) + "-" + year;
      };

      $("#from").on('change', function () {
          var fromDate = new Date($("#from").val()).ddmmyyyy();
          var todaysDate = new Date().ddmmyyyy();
          if (fromDate > todaysDate) {
              $(".alert").removeClass("hide");
              $(this).val('');
          }
          else{
            $(".alert").addClass("hide");
          }
      });

      $("#to").on('change', function () {
          var selectedDate = new Date($("#to").val()).ddmmyyyy();
          var todaysDate = new Date().ddmmyyyy();
          var from = new Date($("#from").val()).ddmmyyyy();
          if (selectedDate > todaysDate) {
            $(".alert").removeClass("hide");
            $(this).val('');
          }
          else if (selectedDate < todaysDate && selectedDate < from ){
            $(".alert").removeClass("hide");
            $(this).val('');
          }
          else{
            $(".alert").addClass("hide");
          }
      });
  }); 
  </script>
